<template>
  <div>
    <el-drawer :with-header="false" :visible.sync="drawer" direction="rtl" :before-close="close" size="75%"
      :append-to-body="true" destroy-on-close :modal-append-to-body="false">
      <div type="primary" class="drawer-close-btn" @click="close"><img class="drawer-back" src="@/assets/images/drawer-back.png" alt=""><span class="close-text">返回产品列表</span>
      </div>
      <div class="drawer-con-wrap">
        <div class="drawer-header">
          <!-- <div class="header-name">客户</div> -->
          <div class="custom-header">
            <div class="header-left">
              <div style="margin-right: 10px;">
                <i v-if="detailData.status == 2" class="rp rp-circle-password" />
                <el-tooltip v-if="true" :content="detailData.star == 0 ? '添加关注' : '取消关注'" effect="dark" placement="top">
                  <i v-if="detailData.star == 0" class="el-icon-star-off focus-icon" @click="toggleStar()" />
                  <i v-else class="rp rp-focus-on focus-icon active" @click="toggleStar()" />
                </el-tooltip>
              </div>

              <div class="item" effect="dark" :content="detailData.name" placement="top">
                <span class="customer-name">{{ detailData.name }}</span>
              </div>

              <!-- <div class="arrow-list">
                <el-button><i class="el-icon-arrow-left"></i></el-button>
                <el-button><i class="el-icon-arrow-right"></i></el-button>
              </div> -->

            </div>
            <div class="header-right">
              <el-button type="primary" @click="btnEditInfo">编辑</el-button>
              <el-button class="btn-blue" style="margin-right: 10px;">转移</el-button>
              <el-dropdown @command="downClick" style="height: 32px;">
                <img src="@/assets/images/drawer-more.png" style="height: 32px;width: 32px;">
                <!-- <el-button><i class="el-icon-more"></i></el-button> -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="2">删除</el-dropdown-item>
                  <el-dropdown-item command="3">下架</el-dropdown-item>
                  <el-dropdown-item command="4">上架</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

          <div class="custom-base mt8">
            <div class="custom-base-item">
              <div class="item-label">产品类别</div>
              <div class="item-value">{{ detailData.categoryName }} </div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">产品单位</div>
              <div class="item-value">{{ detailData.brandName ? detailData.brandName : ' ' }}</div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">产品价格</div>
              <div class="item-value">{{ detailData.price ? detailData.price : ' ' }}</div>
            </div>
            <div class="custom-base-item">
              <div class="item-label">产品编码</div>
              <div class="item-value">{{ detailData.productSpecSn }}</div>
            </div>
          </div>


          <!--  -->
          <div class="info-block-wrap">
            <div class="info-left-wrap">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="详细资料" name="particular">
                  <EditBaseInfo :id="rowData.id" ref="EditBaseInfo" crmType='product' :detail="detailData">
                  </EditBaseInfo>
                </el-tab-pane>
                <el-tab-pane label="附件" name="accessoryBlock">
                  <accessoryBlock></accessoryBlock>
                </el-tab-pane>
                <el-tab-pane label="操作记录" name="relativeHandle">
                  <RelativeHandle></RelativeHandle>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
    <addDialog ref="addDialog" :dialogTitle="dialogTitle" :addType="addType" :action="createAction"
      @saveSubmit="saveSubmit"></addDialog>
  </div>
</template>
<script>
//详细资料
import EditBaseInfo from '@/components/BasicInformation/EditBaseInfo.vue'
//附件
import accessoryBlock from '@/components/busComponents/accessoryBlock/index.vue';
//操作记录
import RelativeHandle from '@/components/busComponents/RelativeHandle'

import DetailMixin from '@/mixins/Detail'
import addDialog from '@/components/DialogCustom/addDialog.vue'
import { queryByIdProduct, starCustomer } from "@/api/product/product";


export default {
  components: {  EditBaseInfo,accessoryBlock,RelativeHandle,addDialog},
  mixins: [DetailMixin],
  data () {
    return {
      drawer: false,
      loading: false,
      detailData: {
        status: 0
      },
      customSbstractFlg: true,
      activeName: 'particular',
      dialogTitle: '',
      addType: this.$GlobalStatus.tableType.Product,
      rowData: {},
      createAction: {
        type: 'save',
        id: '',
        data: {}
      },
    }
  },
  methods: {
    btnAddSea () {
      // var params = {

      // }
      // updateCustomerByIds(this.rowData.id).then(res => {
      //   this.detailData = res.data;

      // }).catch(error => {

      // });
    },
    downClick (command) {
      this.$emit("drawerInfo", command, this.detailData.id);
    },
    closeAddFun () {
      this.getInfo();
      this.$refs.addDialog.closeFun();
    },
    downDelete () {

    },
    getInfo () {
      queryByIdProduct(this.rowData.id).then(res => {
        this.detailData = res.data;

      }).catch(error => {

      });
    },
    toggleStar () {
      starCustomer(this.detailData.id).then(res => {
        if (res.code == 0) {
          if (this.detailData.star == 0) {
            this.detailData.star = 1
            this.$message({
              message: h('i', { style: 'color: teal;line-height: 1.5;font-style:normal;;margin-left:8px' }, '关注成功'),
              // 图标类名
              iconClass: 'el-icon-success'
            });
          } else {
            this.detailData.star = 0
            this.$message({
              message: h('i', { style: 'color: teal;font-style:normal;margin-left:8px' }, '取消关注成功'),
              iconClass: 'el-icon-success'
            });
          }
        }
      }).catch(error => {

      });
    },
    btnEditInfo () {
      this.createAction.type = 'update';
      this.createAction.id = this.detailData.id;
      this.dialogTitle = "编辑产品"
      this.$refs.addDialog.showFun(this.detailData.id, this.detailData.version, this.detailData.batchId);
      console.log('123456789', this.detailData.version)
    },
    btnAdd (index) {
      this.addType = index;
      this.createAction.type = 'save';
      this.createAction.id = '';
      if (index == 1) {
        this.dialogTitle = "创建联系人"
      }
      if (index == 2) {
        this.dialogTitle = "创建合同"
      }
      if (index == 3) {
        this.dialogTitle = "创建回款"
      }
      this.$refs.addDialog.showFun();
    },
    show (rowData) {
      this.rowData = rowData;
      this.getInfo();
      this.drawer = true;

    },
    close () {
      this.drawer = false;
    },
    handleClick (tab, event) {
      if (tab.paneName == "particular") {
        this.$refs.EditBaseInfo.refreshData();
      }
    },
    /**
   * isSeas 是从公海模块传入的 配合详情is_pool字段确定
   */
    isSeasDetail () {
      if (this.detailData && this.detailData.hasOwnProperty('isPool')) {
        return this.detailData.isPool == 1
      }
      return this.isSeas
    },
    saveSubmit (params) {
      this.$emit("saveSubmit", params);
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/assets/styles/drawer-back.scss";
.el-button {
  // padding: 9px 19px !important;

  //控制字大小
  ::v-deep * {
    font-size: 14px;
    font-weight: 500px !important;
  }

  ::v-deep i {
    margin-right: 13px;
  }
}

.btn-blue {
  color: #204EC4;
  border: 1px solid #D7DBEC;
  border-radius: 4px;
  font-weight: bold;
}

.btn-hei {
  color: #344563;
  border: 1px solid #DBDDE2;
  border-radius: 4px;
}

::v-deep .el-drawer__body {
  background: #F5F6FA;
  box-shadow: -6px 0px 17px 0px rgba(38, 44, 71, 0.15);
  border-radius: 4px 0px 0px 4px;
}

::v-deep .el-tabs__item {
  font-size: 16px;
  color: #5A607F !important;
}

::v-deep .el-tabs__item.is-active {
  font-size: 16px;
  color: #204EC4 !important;
}

.drawer-con-wrap {
  .mt8 {
    margin-top: 20px;

    .createBtn {
      color: #164ACD;
      border: 1px solid #DBDDE2;
    }
  }

  padding: 32px 32px 16px;

  .drawer-header {
    .header-name {
      font-size: 14px;
      color: #6b778c;
    }

    .custom-header {
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;

        .customer-name {
          font-size: 22px;
          font-weight: 700;
          color: #172b4d;
        }

        .arrow-list {
          margin-left: 24px;
        }
      }
    }

    .link {
      .edit-link {
        font-size: 16px;
        margin-left: 8px;
      }
    }

    .custom-base {
      padding: 16px 0;
      background: #FFFFFF;
      box-shadow: 0px 1px 3px 0px rgba(21, 34, 50, 0.08);
      border-radius: 3px;
      display: flex;
      align-items: stretch;
      flex-direction: row;

      .custom-base-item {
        // flex: 0 0 20%;
        min-width: 20%;
        padding: 0 25px;
        // border-right: 1px solid #D7DBEC;

        .item-label {
          font-size: 14px;
          font-weight: 500;
          color: #7E84A3;
        }
        .item-value {
          font-size: 14px;
          font-weight: 400;
          margin-top: 5px;
          color: #131523;
        }

        // .phone {
        //   color: #36b37e;
        // }

      }

      .custom-base-item:last-child {
        border-right: none;
      }
    }

    .info-block-wrap {
      display: flex;
      margin-top: 16px;
      align-items: stretch;
      flex-direction: row;
      background: #FFFFFF;
      box-shadow: 0px 1px 4px 0px rgba(21, 34, 50, 0.08);
      border-radius: 4px;

      .info-left-wrap {
        flex: 1;
        padding: 10px 25px 25px 25px;
        overflow: hidden;
        width: 100%;
      }
    }


  }
}
</style>